<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户信息</title>
</head>
	<link href="${ctxPath}/static/theme/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${ctxPath}/static/theme/css/font-awesome.css?v=4.4.0" rel="stylesheet">

    <!-- jqgrid-->
    <link href="${ctxPath}/static/theme/css/plugins/jqgrid/ui.jqgrid.css?0820" rel="stylesheet">

    <link href="${ctxPath}/static/theme/css/animate.css" rel="stylesheet">
    <link href="${ctxPath}/static/theme/css/style.css?v=4.1.0" rel="stylesheet">
    
    <link href="${ctxPath}/static/theme/css/plugins/jsTree/style.min.css" rel="stylesheet">

<body class="gray-bg">
    <div class="wrapper wrapper-content">
		<div class="row">
		<div class="col-sm-3">
			<div class="ibox float-e-margins">
				<div class="ibox-title">
						<h3>部门树</h3>
					</div>
					<div class="ibox-content" id="dept_tree">
						 <div id="jstree"></div>
				</div>	
			</div>
		</div>
		<div class="col-sm-9">
		<div class="ibox float-e-margins">
                    <div class="ibox-title">
                       <div class="row">
                        <form class="form-horizontal" role="form" action="#">
                            <div class="row">
                                <div class="form-group col-sm-4">
                                    <label  class="col-sm-4 control-label">名称:</label>
                                    <div class="col-sm-8">
                                        <input type="text" role="search" class="form-control input-sm" name="name" id="name">
                                    </div>
                                </div>
                                <div class="form-group col-sm-4">
                                    <label  class="col-sm-4 control-label">登录名:</label>
                                    <div class="col-sm-8">
                                        <input type="text" role="search" class="form-control input-sm" id="login" name="login">
                                    </div>
                                </div>
                            </div>
                            <div class="row text-center">
                                <button type="button" class="btn btn-primary" id="search_user" onclick="search()">查询</button>&nbsp;&nbsp;&nbsp;&nbsp;
                                <button type="button" class="btn btn-primary" onclick="eliData()">清空</button>&nbsp;&nbsp;&nbsp;&nbsp;
                                <button type="button" class="btn btn-primary" onclick="addUser()">新增</button>&nbsp;&nbsp;&nbsp;&nbsp;
                            </div>
                        </form>
                    </div>
                    </div>
                    <div class="ibox-content" id="grid_content">
                        <table id="table_data_list"></table>
						<div id="paper_list"></div>
                    </div>
                </div>
             </div>
		</div>
	</div>
</body>
<script src="${ctxPath}/static/theme/js/jquery.min.js"></script>
<script src="${ctxPath}/static/theme/js/bootstrap.min.js"></script>
<!--jqgrid js-->
<script src="${ctxPath}/static/theme/js/plugins/jqgrid/i18n/grid.locale-cn.js?0820"></script>
<script src="${ctxPath}/static/theme/js/plugins/jqgrid/jquery.jqGrid.min.js?0820"></script>

<script src="${ctxPath}/static/theme/js/plugins/jsTree/jstree.min.js"></script>
<script src="${ctxPath}/static/theme/js/json2.js"></script>
<script>
	$(function(){
		//在进行jstree初始化菜单前，清空容器
	    $('#jstree').data('jstree',false).empty();
	    setjstree();
		
		 $.jgrid.defaults.styleUI = 'Bootstrap';
	     $('#table_data_list').jqGrid({
	         datatype : 'json',
	         url : "${ctxPath}/user/findUser",
	         mtype : 'POST',
	         colNames: ["编号","姓名","登录名","所属部门","操作"],
	         colModel: [
	             {name: "id", index: "id", hidden:true},
	             {name: "name", title: "name", width: 80},
	             {name: "loginId", index: "loginId", width: 60},
	             {name: "department", index: "department", width: 60},
	             {name: "operation", index: "operation", width: 60,formatter:function (value, grid, rowObject, state) {
						return '<a title="修改信息" onclick="changeInfo('+rowObject.id+')" class="btn btn-primary btn-xs"><i class="fa fa-edit"></i></a> '
						+'<a title="重置密码" onclick="resetPwd('+rowObject.id+')" class="btn btn-primary btn-xs"><i class="fa fa-repeat"></i></a> '
						+'<a title="删除用户" onclick="delUser('+rowObject.id+')" class="btn btn-primary btn-xs"><i class="fa fa-remove"></i></a> ';
	                 }
	             },
	//              {name: "login", index: "login", width: 60,formatter:"date", formatoptions: {newformat:'Y-m-d'}},
	         ],
	         height: 'auto',
	         pager: "#paper_list",
	         rowNum: 10,
	         rowList: [10, 20, 30],
	         multiselect: true,
	         shrinkToFit: true,
	         viewrecords : true,
	         autowidth: true,
	         viewrecords: true,
	     }).navGrid('#paper_list',{del:false,edit:false,search:false,add:false}, {id:'myedit'});
	     
	     // 表格宽度调整
	     function jqgridResize(width) {
	         $('#table_data_list').setGridWidth(width);
	     }
	     // 表格宽度初始化
	     jqgridResize($('#grid_content').width());
	     // 表格宽度自适应
	     $(window).bind('resize', function () {
	         var width = $('#grid_content').width();
	         jqgridResize(width);
	     });
	
	 	 // 监听事件
	     $('input[role=search]').bind('keyup', function(event) {
	         if (event.keyCode == "13") {
	             //回车执行查询
	             $('#search_user').click();
	         }
	
	     });
	})


	function search() {
		var name = $('#name').val();
		var login = $('#login').val();
		$("#table_data_list").jqGrid('setGridParam', {
			datatype : 'json',
			page : 1
		});
		$("#table_data_list").jqGrid('setGridParam', {
			postData : {
				name : name,
				login : login
			}
		});
		$("#table_data_list").trigger("reloadGrid");
	}

	/**
	 * 清除查询条件
	 */
	function eliData() {
		$("#contact").val("");
		$("#name").val("");
		$("#address").val("");
	}

	function addUser() {
		window.location = "${ctxPath}/user/addUser";
	}

	function setjstree() {
		var jstreedate = [];
		$.ajax({
			url : '${ctxPath}/dept/getTree',
			type : 'post',
			dataType : 'json',
			async : false,
			success : function(data) {
				jstreedate = data;
				for ( var i in jstreedate) {
					if (jstreedate[i].parent == 0) {
						jstreedate[i].parent = "#";
					}
				}
				console.log(jstreedate);
				$('#jstree').jstree({
					'core' : {
						'data' : jstreedate,
					}
				});

			}
		});
		//加载完成后设置打开节点
		$("#jstree").on("loaded.jstree", function(event, data) {
			// 展开所有节点
			$('#jstree').jstree('open_all');
			// 展开指定节点
			//data.instance.open_node(1);     // 单个节点 （1 是顶层的id）
			//data.instance.open_node([1, 10]); // 多个节点 (展开多个几点只有在一次性装载后所有节点后才可行）
		});

		$("#jstree").on("changed.jstree", function(e, data) {
			console.log("The selected nodes are:");
			console.log(data.node.id); //选择的node id
			console.log(data.node.text); //选择的node text

			$("#table_data_list").jqGrid('setGridParam', {
				datatype : 'json',
				page : 1
			});
			$("#table_data_list").jqGrid('setGridParam', {
				postData : {
					'deptId' : data.node.id,
				}
			});
			$("#table_data_list").trigger("reloadGrid");
		})
	}


	function changeInfo(id) {
		window.location = "${ctxPath}/user/editInfo?id="+id;
	}

	function delUser(id) {
		if (window.confirm('你确定要删除吗？')) {
			$.ajax({
				type : "post",
				url : "${ctxPath}/user/del",
				data : {
					id : id,
				},
				dataType : "json",
				success : function(response) {
					console.log(response);
					if (response.flag) {
						alert("删除成功！");
						$('#table_data_list').trigger("reloadGrid");
					} else {
						alert(data.msg);
					}
				}
			});
		} else {
			return false;
		}
	}

	function resetPwd(id) {
		if (window.confirm('你确定要重置吗？')) {
			$.ajax({
				type : "post",
				url : "${ctxPath}/user/reset",
				data : {
					id : id,
				},
				dataType : "json",
				success : function(response) {
					console.log(response);
					if (response.flag) {
						alert("重置成功！");
						$('#table_data_list').trigger("reloadGrid");
					} else {
						alert(data.msg);
					}
				}
			});
		} else {
			return false;
		}
	}
</script>
</html>